<template>
    <view class="media">
        

        <view class="container-itemV3" v-for="item in jdata" :key="item.id" @click="goTo(item.id)">
            <view class="item-con item-front">
                <a class="card-front">
                  <view class="content">
                    <view class="title">
                        <view class="tit" :title="item.title">{{item.title}}</view>
                    </view>
                    <view class="desc">
                        {{item.description}}</view>

                        <view class="cli">
                            <view class="date">{{item.cdate}}</view>
                            <view class="click">
                                <img src="../../static/img00/yey.png" />
                                <view>{{item.click}}</view>
                            </view>
                        </view>

                    </view>

                    <view class="pic2">
						<img class="swiper-lazy"  :src="item.image" :alt="item.title" />
                    </view>
                    
                </a>
            </view>
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
  	jdata:{
  		// type: Array,
  		required: true,
  	}
  },
  methods: {
	  goTo(id){
	  	this.$common.navigateTo("/pages/index/journalism/Journalism?id="+id);
	  }
  },
};
</script>

<style scoped>

.container-itemV3 {
    height: 194upx;
    width: 670upx;
    border:1upx solid #cdd7e1;
    border-radius: 10upx;
    margin: 0 auto;
	margin-bottom: 20upx;
}
.card-front{
  display: flex;
}
.pic2{
    width: 270upx;
    height: 194upx;
    border-radius: 10upx;
    background: lightcoral;
}
.pic2>img{
  width: 270upx;
    height: 194upx;
}
.content{
  height: 200upx;
  width: 392upx;
}

.tit{
  height: 36upx;
  width: 366upx;
  overflow: hidden;
  color: #343434;
  font-size: 28upx;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 20upx;
  margin-left:14upx;
}
.desc{
  height: 82upx;
  width: 366upx;
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:2;
  color: #9a9a9a;
  font-size: 24upx;
  line-height: 40upx;
  margin-top:10upx;
  margin-left: 14upx;
}
.cli{
  display: flex;
}
.date{
  font-size: 24upx;
  color: #333;
  margin-left:14upx ;
  padding-right:100upx ;
}
.click{
  display: flex;
}
.click>img{
  height: 24upx;
  width: 48upx;
  margin-top: 10upx;
  padding-right:20upx;
}
</style>
